<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js" type="text/javascript"></script>
<#include "/common/pagerForm.html">
<style>
.leftBar .j-first {
    display: none;
}

.leftBar .j-num {
    display: none;
}

.leftBar .j-last {
    display: none;
}

.leftBar .jumpto {
    display: none;
}

.oeeSearch label {
    width: 70px;
}

.oeeSearch ul.searchContent li {
    width: 230px;
}

.leftOee {
    border-color: #d8dfe5;
    border-style: solid;
    border-width: 1px 1px 0 0;
    float: left;
    display: block;
    overflow: auto;
    width: 280px;
    background: #fff;
}

.charBox {
    margin-left: 280px;
        border-color: #d8dfe5;
    border-style: solid;
    border-width: 1px 0 0 0;
}

.tip
{
position: absolute;
top: 50%;
left: 50%;
}


</style>
<form rel="pagerForm" method="post" action="" class="required-validate" onsubmit="return navTabSearch(this)">
    <div class="pageHeader">
        <div class="searchBar oeeSearch">
            <ul class="searchContent">
                <li><label> <@label key='equipmentCode.C,colon'>设备编号：</@label> </label> <input type="text" name="equipmentCode" value="${condition.equipmentCode!''}" /></li>
                <li><label> <@label key='equipmentText.C,colon'>设备描述：</@label> </label> <input type="text" name="equipmentText" value="${condition.equipmentText!''}" /></li>
                <li><label><@label key="theDate.C,colon">作业日期：</@label></label> <input id="theDateSt" type="text" readonly="readonly" style="background-color: #fff;" name="theDateSt" dateFmt="yyyy-MM-dd" class="date required" value="<#if (condition.theDateSt)??>${condition.theDateSt?string("yyyy-MM-dd")}</#if>" /> <a class="inputDateButton" href="javascript:;"><@label key="select.B">选择</@label></a>
                </li>
                <li><label><@label key="to.C,colon">至：</@label></label> <input id="theDateEd" type="text" readonly="readonly" style="background-color: #fff;" name="theDateEd" dateFmt="yyyy-MM-dd" class="date required" value="<#if (condition.theDateEd)??>${condition.theDateEd?string("yyyy-MM-dd")}</#if>" /> <a class="inputDateButton" href="javascript:;"><@label key="select.B">选择</@label></a>
                </li>
                <li class="query">
                    <div class="buttonActive">
                        <div class="buttonContent">
                            <button type="submit"><@label key="query.B">查询</@label></button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="pageContent">
        <div class="leftOee">
            <table class="table" width="100%" layoutH="100" style="overflow: scroll;">
                <thead>
                    <tr>
                        <th width="100" ><@label key="equipmentCode.C">设备编号</@label></th>
                        <th width="100"><@label key="equipmentText.C">设备描述</@label></th>
                        <th width="50" ><@label key="oee.C">OEE</@label></th>
                    </tr>
                </thead>
                <tbody>
                    <#if page??><#if (page.data?size>0)> <#list page.data as result>
                    <tr  target="result_id" rel="${result.equipmentCode!''}" onclick="eqSelect(${result.json})">
                        <td>${result.equipmentCode!''}</td>
                        <td>${result.equipmentText!''}</td>
                        <td><#if (result.oee??)>${(result.oee*100)?string('#.##')}%<#else> <span style="color: red; line-height: 25px;">*</span></#if></td>
                    </tr>
                    </#list>
                     <#else>
                    <tr target="scheduledTime_id">
                        <td colspan="6" class="noData">======<@label key="noListData.C">列表无数据</@label>=====</td>
                    </tr>
                    </#if> <#else>
                    <tr target="scheduledTime_id">
                        <td colspan="6" class="noData">======<@label key="noListData.C">列表无数据</@label>=====</td>
                    </tr>
                
                    </#if>
                    
                </tbody>
            </table>
            <div class="panelBar leftBar" style="width: 280px">
                <#if page??>
                <div class="pages">
                    <span><@label key="pagePanelShow.C">显示</@label></span> <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"> <#list [10,20,30,50,100,200] as page_size> <#if (page.numPerPage)==page_size>
                        <option value="${page_size}" selected="selected">${page_size}</option> <#else>
                        <option value="${page_size}">${page_size}</option> </#if> </#list>
                    </select> <span><@label key="pagePanelMiddle.C">共</@label></span><span> <#if page.totalCount??>${page.totalCount?c}<@label key="item.C">条</@label></span></#if>
                </div>
                <div class="pagination" targetType="navTab" totalCount="<#if page.totalCount??>${page.totalCount?c}</#if>" numPerPage="<#if page.numPerPage??>${page.numPerPage?c}</#if>" pageNumShown="5" currentPage="<#if page.pageNum??>${page.pageNum?c}</#if>"></div>
                </#if>
            </div>

        </div>
    
    
        <div  id="charBox" class="charBox" layoutH="60">
        
        </div>
        
        <div class="tip" id="tip"><@label key="oeeTrendPleaseClick.C">请点击左侧设备查看OEE趋势</@label></div>
    </div>
</form>

<script type="text/javascript">
Date.prototype.format=function (){
    var s='';
    s+=this.getFullYear()+'-';// 获取年份。
    s+=(this.getMonth()+1)+"-";         // 获取月份。
    s+= this.getDate();                 // 获取日。
    return(s);                          // 返回日期。
    };

    
    
    var option;
    require.config({
        paths : {
            echarts : '${rc.getContextPath()}/manage/js/echarts'
        }
    });
    require([ 'echarts','echarts/theme/macarons', 'echarts/chart/line'

    ], function(ec, theme) {
         var oeeChart = ec.init(document.getElementById('charBox'),theme);
                 option = {
                            title : {
                                text: "<@label key='oeeTrend.C'>OEE趋势分析</@label>",
                                x:'center'
                            },
                            tooltip : { 
                                trigger: 'axis',
                                formatter: '{b} <br/>{a}:{c}%' 
                            },
                            legend: {
                                data:['OEE'],
                            x:'left'
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : false,
                                    data : []
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    axisLabel : {
                                        formatter: '{value} %'
                                    }
                                }
                            ],
                            series : [
                                {
                                    name:'OEE',
                                    type:'line',
                                    showAllSymbol:false,
                                    data:[],
                                    itemStyle:{ 
                                           normal:{ 
                                              label:{ 
                                                   show: true, 
                                          formatter: '{c}%' 
                                                    }, 
                                                    labelLine :{show:true}
                                                } 
                                            } ,
                                }
                                
                               
                            ],
                            noDataLoadingOption:{
                                text :"<@label key='oeeNoData.C'>OEE暂无数据</@label>",
                                effect : 'whirling',
                                   effectOption:{
                                   backgroundColor:"#fff"
                               }
                            }
                        };
                                       
    
    
    });


    
    function eqSelect(eq)
    {
        $('#tip', navTab.getCurrentPanel()).attr('style','display: none;');
        $.DWZajax({
            url : hostUrl + "/emOee/getOeeTrend",
            data : {
                'equipmentCode' : eq.equipmentCode,
                'theDateSt':$('#theDateSt', navTab.getCurrentPanel()).val(),
                'theDateEd':$('#theDateEd', navTab.getCurrentPanel()).val()
            },
            callback : function(data) {
                    var allDate = [];
                    var ab = $('#theDateSt', navTab.getCurrentPanel()).val().split("-");
                    var ae = $('#theDateEd', navTab.getCurrentPanel()).val().split("-");
                    var db = new Date();
                    db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);
                    var de = new Date();
                    de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
                    var unixDb=db.getTime();
                    var unixDe=de.getTime();
                    for(var k=unixDb;k<=unixDe;){
                    allDate.push((new Date(parseInt(k))).format());
                    k=k+24*60*60*1000;
                    }
                    
                var detail = eval(data);
                option.title.subtext="<@label key='equipmentCode.C'>设备编号</@label>："+eq.equipmentCode+"\n"+"<@label key='date.C'>日期</@label>："+$('#theDateSt', navTab.getCurrentPanel()).val()+"<@label key='to.C'>至</@label>"+$('#theDateEd', navTab.getCurrentPanel()).val();
                if (data != null) {
                       var legend = new Array();
                       var data=new Array();
                       $.each( detail, function(index) {
                           var val = detail[index];
                         
                           if(typeof(val.oee) !=  'undefined' )
                               {
                               var i=jQuery.inArray(new Date(val.theDate).format(),allDate)
                               var o=(Number(val.oee)*100).toFixed(2);
                           //legend.push(new Date(val.theDate).format());
                             // data.push(o);
                             data[i]=o;
                               }
                       });
                       option.xAxis[0].data=allDate;
                       option.series[0].data=data;
                }
                else
                    {
                       option.xAxis[0].data=[];
                       option.series[0].data=[];
                    }
                 require('echarts').init(document.getElementById('charBox'),require('echarts/theme/macarons')).setOption(option,true);
            }
        });
    }


</script>